<template>
    <div class="main">
     <el-card class="card">
       <div slot="header">
            <el-upload
  class="upload-demo"
  ref="uploadImg"
  multiple
:on-success="uploadSuccess"
  :action="uploadOss"
   :headers="uploadHeaders">
  <el-button size="small" type="primary">点击上传素材</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<img style="height: 150px" :src="coverImg" alt="">
       </div>
       <div>
         <el-row type="flex" class="row-bg" justify="space-between" align="middle" >

  <el-col :span="24" v-for="item in materialList" :key="item.id" class="item">
    <el-card  >
      <div slot="header">创建时间：{{item.createTime}}</div>
      <div>
        <img :src="item.ossUrl" alt="">
        <div class="del">
          <el-button type="danger" @click="del(item.id)">删除</el-button>
        </div>
      </div>
    </el-card>

    </el-col>
<div class="temp" v-for="(item,index) in materialList" :key="index"></div>

</el-row>
       </div>
     </el-card>
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
</template>

<script>
import mixin from '@/minx/index'
import { findMaterial,delMaterial} from "@/api/material"
export default {
    props: {

    },
     mixins: [mixin],
    data() {
        return {
          coverImg:'',
          materialList:[],
          uploadOss:'http://leju.bufan.cloud/lejuAdmin/material/uploadFileOssSave'
        };
    },
    computed: {

    },
    created() {
      this.init()
    },
    mounted() {

    },
    watch: {

    },
    methods: {
      uploadSuccess(res,file){
        console.log(res)
       if(res.success){
         this.coverImg=res.data.fileUrl
         this.$refs.uploadImg.clearFiles()
         this.$message.success('上传图片成功')
         this.init()
       }

      },
      init(){
         findMaterial(this.page.currentPage, this.page.size).then(res=>{
           console.log(res)
          if(res.success){
            this.$message.success('获取素材列表信息成功')
            this.materialList=res.data.rows
            this.page.total = res.data.total;
          }
         })
      },
      del(id){
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delMaterial(id).then(res => {
            if (res.success) {
              this.init();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

      },
      handleSizeChange(val) {
      console.log(val);
      this.page.size = val;
      this.page.currentPage = 1;
      this.init();
    },
    handleCurrentChange(val) {
      // this.start=val
      this.page.currentPage = val;
      this.init();
    },
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.main{
    background-color: #f0f2f5;
}
.card{
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  .row-bg{
    flex-wrap: wrap;
    .item{
    width: 220px;
    height: 418px;
    margin-bottom: 30px;
    img{
      width: 100%;
      height: 250px;
    }
    .del{
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 10px;
    }
  }

  }
  .row-bg::after{
    content: '';
     width: 220px;
  }

.temp {
   width: 220px;
          height: 0;
          margin-bottom: 0;
          border: none;
          padding: 0;
        }
}
</style>
